(function(){
//进入页面 请求数据 渲染页面  shopid和areaid默认为0
render()
// 给nav中的shop和area两个绑定点击事件
$('.shop').click(clcikHandler)
$('.area').click(clcikHandler)


function clcikHandler(){
    // 如果点击的是shop就申请shop的数据 然后渲染
    if($(this).hasClass('shop')){
        $.ajax({
            url:'http://chst.vip:1234/api/getgsshop'
        }).then(res=>{
            let html=res.result.reduce((value,item)=>{
                return value+`
                <li shopid=${item.shopId}>${item.shopName}</li>
                `
            },"")
            $('.from').html(html)
            // 给渲染上的li添加点击事件
            clickLi()
        })
        // 如果点击的是area就申请area的数据 然后渲染
    }else if($(this).hasClass('area')){
        $.ajax({
            url:'http://chst.vip:1234/api/getgsshoparea'
        }).then(res=>{
            let html=res.result.reduce((value,item)=>{
                return value+`
                <li areaid=${item.areaId}>${item.areaName}</li>
                `
            },"")
            $('.from').html(html)
            // 给渲染上的li添加点击事件
            clickLi()
        })
    }

    // 设置from列表的显示隐藏
    $('.from').toggleClass('show')

}


    function render(){
        // 获取shop和area标签上存储的shopid和areaid的值
        let shopid=$('.shop').attr('shopid')*1
        let areaid=$('.area').attr('areaid')*1

        // 用获取到的shopid和areaid作为参数来请求商品数据，然后渲染商品数据
        $.ajax({
            url:`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`
        }).then(res=>{
            let html=res.result.reduce((value,item)=>{
                return value+`
                <li>
                <a href="javascript:void(0)">
                    <img src="${item.productImg}" alt="">
                    <p class="title">${item.productName}</p>
                    <p class="price">${item.productPrice}</p>
                    <div class="buy">去凑单</div>
                </a>
            </li>
                `
            },"")
            $('.product .info').html(html)
        })
    }

    function clickLi(){
        $('.from li').click(function(){
            // 判断点击的li是shop的还是area的
            if($(this).attr('shopid')!==undefined){
                // 将li上的shopid赋值给导航中shop的shopid属性，并且将li的内容赋值给shop的内容
                $('.shop').attr('shopid',$(this).attr("shopid"))
                $('.shop span:eq(0)').html($(this).html())
            }else{
                $('.area').attr('areaid',$(this).attr("areaid"))
                $('.area span:eq(0)').html($(this).html().slice(0,2))
            }
            render()
        })
    }
})()